<template>
	<view :style="{height:!isShaiXuan ? '100vh' : '',overflow:!isShaiXuan ? 'hidden' : 'initial'}">
		<view class='productList'>
			<view class='search acea-row row-between-wrapper'>
				<view class='input acea-row row-between-wrapper' @click="bandBackSearch()">
					<text class='iconfont iconsousuo-copy'></text>
					<input placeholder='搜索商品名称' disabled placeholder-class='placeholder' confirm-type='search'
						name="search" v-model='where.keywords'></input>
				</view>
				<view class="tusou">
					<!-- <view class='iconfont' :class='is_switch==true?"iconduotu":"iconliebiao"' @click='Changswitch'></view> -->
					<view class="iconfont iconxiangji5" @click="bandTusou"></view>
					<view class="tit" @click="bandTusou">图搜</view>
				</view>
			</view>
			<view class="tabsList">
				<view @tap="set_where">筛选
					<view class="caret-wrapper">
						<i class="sort-caret ascending"></i>
						<i class="sort-caret descending"></i>
					</view>
				</view>
				<view @click="editChange">{{isEdit?'完成':'编辑'}}</view>
			</view>
			<mescroll-body ref="mescrollRef" top="104px" :bottom="bottomH+'rpx'" @init="mescrollInit" :down="downOption"
				@down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
				<view class="shoppingList-wrap" v-for="(item,index) in goodList" :key="index">
					<view class="top" @click="clickH(item.id,index)">
						<view style="display: flex;">
							<view class="checkbox" v-if="isEdit">
								<u-checkbox v-model="item.isSelect" shape="circle">
								</u-checkbox>
							</view>
							<view class="image">
								<u-image width="150rpx" height="150rpx" :src="item.image"></u-image>
								<image src="../../static/images/accPush.png" class="isBest" v-show="item.isBest">
								</image>
							</view>
							<view class="name-wrap">
								<view class="text-name marginB10">{{item.storeName}}</view>
								<view class="text-Number marginB10">{{item.keyword}}</view>
								<view class="selling-price marginB10">
									<view class="ln-price">￥<text class="priceText">{{item.price}}</text></view>
								</view>
							</view>
						</view>
						<view class="operation">
							<view></view>
							<view class="operation-content">
								<view class="operation-button">
									<uni-icons type="compose" class="u-icon-class"></uni-icons>编辑
								</view>
								<view class="operation-button" @tap.stop="changeGoodsShell(item)">
									<u-icon name="bag" class="u-icon-class" size="32"></u-icon>{{item.isShow?"下架":"上架"}}
								</view>
							</view>
						</view>
					</view>

				</view>
			</mescroll-body>
		</view>
		<view v-if="isEdit" class="footer" :class="bottomLift!=0?'bottomLift':''"
			:style="{paddingBottom: `${bottomLift}px`}">
			<u-checkbox v-model="checkStatus" shape="circle" @tap="checkAll">全选</u-checkbox>
			<view @tap="zhuanquShow()">加入专区</view>
			<view @tap="bacthUpdate(0)">{{current==0?'批量下架':'批量上架'}}</view>
			<view class="btn" @tap="updateGoods(1)">设置价格</view>
			<view class="btn pushBtn" @tap="bacthUpdate(1)">批量推荐</view>
		</view>
		<!-- 筛选 -->
		<div class="shaixuanMask" @click="isShaiXuan = true" :style="{right:isShaiXuan?'-750rpx':'0'}">
			<screening ref="screening" class="shaixuanCon" :shaixuan1="shaixuan1" :shaixuan2="shaixuan2" :isTusou="true"
				:keyword="where.keyword" @getProductList="queding" @quxiao="quxiao"
				:style="{right:isShaiXuan?'-750rpx':'0'}"></screening>
		</div>

		<u-popup v-model="zhuanquShow" mode="center" :closeable='true' :mask-close-able="false" class="popup">
			<view class="title">加入专区</view>
			<view class="type">
				<view>选择专区：</view>
				<picker @change="bindPickerChange" :value="index" :range="zhuanquList" range-key="name">
					<view class="picker acea-row row-between-wrapper">
						<view class='reason'>{{zhuanquList[idx].name}}</view>
						<text class='iconfont iconarrow-right1'></text>
					</view>
				</picker>
			</view>
			<view class="btntype">
				<view class="btn" @tap="show=false">取消</view>
				<view class="btn pushBtn" @tap="addZhuanqu">确定</view>
			</view>
		</u-popup>
		<!-- 裁剪图片 -->
		<l-clipper :src="tempFilePath" @confirm="caijianOk" @cancel="caijianNo" ref="lclipper">
		</l-clipper>
	</view>
</template>

<script>
	let app = getApp();
	import {
		productLstApi
	} from '@/api/store.js';
	import {
		storeGoodsApi,
		productIsshow,
		buildGoodsApi,
		batchIsBestApi,
		batchIsShowApi,
		zoneList,
		zoneProductAdd,
	} from '@/api/storeGoods.js'
	import {
		mapGetters
	} from "vuex";
	import screening from '@/components/filters/filters.vue';
	import lClipper from '@/components/lime-clipper/index'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		computed: mapGetters(['uid', "iconList"]),
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			screening,
			lClipper
		},
		data() {
			return {
				goodList: [], //商品列表数据
				where: { //商品筛选条件
					page: 1,
					limit: 10,
					keywords: '',
					priceOrder: '',
					stockAreas: '',
					brandIds: '',
					cateIds: '',
					minPrice: '',
					maxPrice: '',
					seasonCode: '',
					// zoneId:'',
					type: '1',
				},
				downOption: {
					textInOffset: this.$t('publicLang.pullDownToRefresh'), // 下拉的距离在offset范围内的提示文本
					textOutOffset: this.$t('publicLang.releaseUpdate'), // 下拉的距离大于offset范围的提示文本
					textLoading: this.$t('publicLang.loading'), // 加载中的提示文本
					textSuccess: this.$t('publicLang.loadedSuccessfully'), // 加载成功的文本
					textErr: this.$t('publicLang.failedToLoad'), // 加载失败的文本
					auto: false
				},
				upOption: {
					textLoading: this.$t('publicLang.loading'), // 加载中的提示文本
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 20, // 每页数据的数量
					},
					empty: {
						tip: this.$t('publicLang.empty') // 提示
						// btnText: "去看看",
					},
				},
				isShaiXuan: true,
				shaixuan1: {},
				shaixuan2: {},
				shaixuandata: {},

				tempFilePath: "",
				bottomLift: app.globalData.bottomLift,
				options: {},
				isEdit: false,
				checkStatus: false,

				productIdList: [],
				zhuanquList: [],
				zhuanquShow: false,
				zoneId: '',
				idx: '',
				bottomH: 0,
			};
		},
		onLoad: function(options) {
			this.options = options
			console.info(options, 111)
			var that = this
			if (options.word && options.word != "") {
				that.where.keywords = options.word
			}
			this.getZhuanQuList()
		},
		methods: {
			upCallback(page) {
				let _this = this
				this.where.page = page.num
				productLstApi(this.where).then(res => {
					console.info(res.data)
					var data = res.data.list;
					if (page.num == 1) _this.goodList = [];
					data.map((item) => {
						item.isSelect = false
					})
					_this.goodList = _this.goodList.concat(data);
					_this.mescroll.endBySize(data.length, res.data.total);
				})
			},
			editChange() {
				this.isEdit = !this.isEdit
				this.mescroll.lockDownScroll(this.isEdit)
				this.bottomH = this.isEdit ? 110 + this.bottomLift : 0
				this.productIdList = []
				this.goodList.map((i) => {
					this.$set(i, 'isSelect', false)
				})
			},
			// 上下架商品
			changeGoodsShell(row) {
				var _this = this

				uni.showModal({
					title: '提示',
					content: `确定${row.isShow?'下架':'上架'}该商品`,
					cancelText:_this.$t('publicLang.cancel'),
					confirmText: _this.$t('publicLang.sure'),
					success: function(res) {
						if (res.confirm) {
							row.isShow = !row.isShow
							productIsshow({
								productId: row.id,
								isNotShow: row.isShow ? "0" : "1",
							}).then((res) => {
								uni.showToast({
									title: `操作成功~`,
									duration: 2000
								})
							})
						}
					}
				});

			},
			// 去详情页
			godDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.id}`
				})
			},
			// 跳转搜索页
			bandBackSearch() {
				uni.redirectTo({
					url: "/pages/goods_search/index?keyword=" + this.where.keywords
				})
			},
			//筛选点击事件处理
			set_where: function(e) {
				this.isShaiXuan = !this.isShaiXuan;
				this.$refs.screening.navH = 0
				this.$refs.screening.getAddFilterHeight()
			},
			// 筛选确定
			queding(shaixuan, shaixuanReq) {
				this.where.stockAreas = shaixuanReq.stockArea.join(",")
				this.where.brandIds = shaixuanReq.brandIds.join(",")
				this.where.cateIds = shaixuanReq.cids.join(",")
				this.where.supplierIds = shaixuanReq.supplierIds.join(",")
				this.where.seasonCode = shaixuanReq.seasonCode
				this.where.minPrice = shaixuanReq.minPrice
				this.where.maxPrice = shaixuanReq.maxPrice
				this.where.minDiscount = shaixuanReq.minDiscount
				this.where.maxDiscount = shaixuanReq.maxDiscount
				if (shaixuanReq.zoneId) {
					this.where.zoneId = shaixuanReq.zoneId
				} else {
					delete this.where.zoneId
				}
				this.isShaiXuan = true
				this.mescroll.resetUpScroll(true)
			},
			// 筛选取消
			quxiao() {
				this.where = {
					page: 1,
					limit: 20,
					keywords: '',
					stockAreas: '',
					brandIds: '',
					cateIds: '',
					supplierIds: '',
					minPrice: '',
					minDiscount: '',
					maxDiscount: '',
					seasonCode: '',
					maxPrice: '',
					maxPrice: '',
				}
				this.isShaiXuan = true
				this.mescroll.resetUpScroll(true)
			},
			// 专区
			getZhuanQuList() {
				let _this = this
				zoneList({
					page: 1,
					limit: 9999
				}).then((res) => {
					_this.zhuanquList = res.data.list
				})
			},
			bindPickerChange: function(e) {
				this.$set(this, 'idx', e.detail.value)
				this.zoneId = this.zhuanquList[e.detail.value].id
			},
			// 加入专区
			addZhuanqu() {
				var that = this
				var data = {
					productIds: that.productIdList.join(','),
					zoneId: that.zoneId,
				}
				zoneProductAdd(data).then((res) => {
					that.$util.Tips({
						title: '操作成功'
					})
					that.isEdit = false
					that.zhuanquShow = false
					that.idx = ''
					that.productIdList = []
					that.mescroll.resetUpScroll(true)
				}).catch((err) => {
					that.$util.Tips({
						title: err
					})
				})
			},
			zhuanquShow(type) {
				var that = this
				if (that.productIdList.length == 0) {
					that.$util.Tips({
						title: '请选择商品'
					})
					return
				}
				this.zhuanquShow = !this.zhuanquShow
			},
			checkAll() {
				var _this = this
				_this.goodList.map((i) => {
					_this.$set(i, 'isSelect', this.checkStatus)
				})
				this.toggleSelection(1)
			},
			clickH(id, index) {
				if (this.isEdit) {
					this.goodList[index].isSelect = !this.goodList[index].isSelect
					this.toggleSelection(0, this.goodList[index])
					return
				}
				console.info(this.productIdList)
			},
			toggleSelection(type, item) {
				// 0 单选  1多选
				if (type) {
					if (this.checkStatus) {
						this.goodList.map(i => {
							if (!this.productIdList.includes(i.id)) {
								this.productIdList.push(i.id)
							}

						})
					} else {
						this.productIdList = []
					}
				} else {
					if (this.productIdList.includes(item.id)) {
						let arr = []
						this.productIdList.map(i => {
							if (i != item.id) {
								arr.push(i)
							}
						})
						this.productIdList = arr
					} else {
						this.productIdList.push(item.id)
					}
				}
			},
			//图搜
			bandTusou() {
				var that = this;
				uni.setNavigationBarTitle({
					title: "选择识别区域"
				})
				that.where = {
					page: 1,
					limit: 20,
					keyword: '',
					priceOrder: '',
					discountSort: '',
					stockArea: [],
					brandIds: [],
					cids: [],
					targetImage: "",
					attrs: [],
					minPrice: null,
					maxPrice: null,
					minDiscount: null,
					maxDiscount: null
				}
				that.$refs.screening.cancel()

				that.show = true
				that.upload()
			},
			upload() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: (res) => {
						that.tempFilePath = res.tempFilePaths.shift();
					},
					fail() {
						that.show = false
						that.loadend = false;
						that.$set(that.where, 'page', 1);
						that.get_product_list(true);
					}
				});
			},
			// 图片裁剪确定
			caijianOk(eve) {
				var that = this;
				uni.setNavigationBarTitle({
					title: "搜索结果"
				})
				that.url = eve.detail.tempFilePath;
				that.show = false
				console.log(that.url)
				that.where.targetImage = eve.detail.tempFilePath
				that.loadend = false;
				that.$set(that.where, 'page', 1);
				that.get_product_list(true);
			},
			// 图片裁剪取消
			caijianNo() {
				var that = this;
				uni.setNavigationBarTitle({
					title: "搜索结果"
				})
				that.show = false
				that.loadend = false;
				that.$set(that.where, 'page', 1);
				that.get_product_list(true);
			},
		},
	}
</script>

<style scoped lang="scss">
	.productList {
		background-color: #fff;
	}

	.productList .search {
		width: 100%;
		height: 86rpx;
		padding-left: 23rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
		background-color: #fff;
	}

	.productList .search .input {
		width: 640rpx;
		height: 60rpx;
		background-color: #F6F6F6;
		border-radius: 4rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.productList .search .tusou {
		font-size: 20rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #222222;
		text-align: center;
		margin-right: 23rpx;
	}

	.productList .search .input input {
		width: 548rpx;
		height: 100%;
		font-size: 26rpx;
	}

	.productList .search .input .placeholder {
		color: #999;
	}

	.shoppingList-wrap {
		background-color: #ffffff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.top {
		overflow: hidden;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
	}

	.top .image {
		margin: 0 20rpx;
		width: 160rpx;
		height: 160rpx;
		padding: 5rpx;
		border: 1rpx solid #E6E6E6;
		position: relative;
	}

	.top .image .pic {
		width: 150rpx;
		height: 150rpx;
	}

	.top .image .isBest {
		width: 90rpx;
		height: 30rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.name-wrap {
		display: flex;
		flex-direction: column;
		// width: 250rpx;
		margin-left: 10rpx;
		flex: 1;
		font-size: 26rpx;

		.text-name {
			overflow: hidden;
			white-space: normal;
			text-overflow: ellipsis;
			display: -webkit-box;
			word-wrap: break-word;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}

		.text-Number {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.7);
			display: flex;
			align-items: center;
		}

		.selling-price {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.ln-price {
			font-weight: bold;

			.priceText {
				font-size: 32rpx;
			}
		}
	}

	.operation {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.u-icon-class {
			margin-right: 6rpx;
			font-size: 28rpx;
		}

		.income {
			color: #ff0000;
		}

		.nocome {
			color: green;
		}

		.operation-content {
			display: flex;
		}

		.operation-button {
			display: flex;
			align-items: center;
			font-size: 22rpx;
			font-weight: bold;
		}

		.operation-button~.operation-button {
			margin-left: 20rpx;
		}
	}

	.checkbox {
		display: flex;
		align-items: center;
		width: 30rpx;
		height: 160rpx;
	}

	.marginB10 {
		margin-bottom: 10rpx;
	}

	.tabsList {
		display: flex;
		position: fixed;
		top: 86rpx;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		background-color: #ffffff;
		color: #111111;
		border-bottom: 1rpx solid #eeeeee;
		width: 100%;
		z-index: 999;

		view {
			width: 150rpx;
			text-align: center;
			position: relative;
			height: 34px;
			line-height: 34px;
		}

		.caret-wrapper {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			height: 34px;
			width: 24px;
			vertical-align: middle;
			cursor: pointer;
			overflow: initial;
			position: relative;
		}

		.sort-caret {
			width: 0;
			height: 0;
			border: 4px solid transparent;
			position: absolute;
			left: 7px;
		}

		.ascending {
			border-bottom-color: #c0c4cc;
			top: 8px;
		}

		.descending {
			border-top-color: #c0c4cc;
			bottom: 8px;
		}
	}

	.footer {
		padding: 0 20rpx;
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		display: flex;
		height: 100rpx;
		background-color: #fff;
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		font-size: 24rpx;

		.btn {
			padding: 12rpx 30rpx;
			border: 1rpx solid rgb(29, 28, 28);
		}

		.btn.pushBtn {
			background: black;
			color: #ffffff;
		}
	}

	.bottomLift {
		height: 150rpx !important;
	}

	.shaixuanMask {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		right: -750rpx;
		z-index: 9999;

		.shaixuanCon {
			position: fixed;
			top: 0;
			right: -750rpx;
			z-index: 9999;
			transition: all 0.4s ease-in-out;
		}

		&::v-deep .productSort {
			width: 670rpx;
			position: absolute;
			top: 0;
			right: 0;
		}

		&::v-deep .bottomNav {
			width: 670rpx;
		}
	}

	.popup {
		.title {
			font-size: 32rpx;
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.type {
			display: flex;
			align-items: center;
			padding: 20rpx;

			.picker {
				width: 316rpx;
				padding: 10rpx 20rpx;
				border: 1rpx solid #cecdcd;
				position: relative;
				height: 70rpx;

				.iconfont {
					position: absolute;
					right: 10rpx;
					line-height: 20rpx;
					font-size: 21rpx;
				}
			}
		}

		.btntype {
			display: flex;
			justify-content: space-around;
			padding: 20rpx 0rpx;

			.btn {
				padding: 10rpx 40rpx;
				border: 1rpx solid rgb(29, 28, 28);
			}

			.btn.pushBtn {
				background: black;
				color: #ffffff;
			}
		}
	}
</style>
